<style lang="scss">
.content {
  width: 100%;
  margin-top: 20px;
}


.u-tabs {
  width: 100%;
}

.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

/*卡片样式*/
.treeroot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.content {
  width: 100%;
  margin-top: 20px;
}

.u-tabs {
  width: 100%;
}

.card {
  width: 100%;
  padding: 3px;
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时的阴影效果 */
}

.box {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.textSize {
  font-size: 10px;
}

.icon-container {
  position: fixed;
  top: 430px;
  left: 10px;
  z-index: 999;
  background-color: #007aff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.icon-container u-icon {
  margin-top: 2px; /* 调整图标位置 */
}

.icon-container:hover {
  background-color: #0056b3;
}

.text-blue {
  color: blue; /* 决定状态的颜色 */
}

.text-red {
  color: red; /* 未决定状态的颜色 */
}

/*日期样式*/
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx; /* 适当调整间距 */
}

.label {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.date-picker {
  border: none; /* 去掉边框 */
  padding: 10rpx;
  border-radius: 4rpx;
  background-color: #d32222; /* 添加背景色，以示区分 */
  flex: 1; /* 占满剩余空间 */
}

.date-picker-content {
  display: flex;
  align-items: center;
}

.placeholder {
  color: #999;
  margin-right: 10rpx; /* 适当调整间距 */
}

.evaluate-popup {
  width: 650rpx;
  height: 340rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>

<template>
  <view class="treeroot">
    <view class="">
      <u-tabs
          :list="list"
          :is-scroll="true"
          :current="current"
          bar-width="50"
          :active-color="statusColor"
          @change="change">
      </u-tabs>

      <view class="content">
        <view v-if="current ===0">
          <view class="card" v-for="(item, index) in itemArr" :key="index">
            <!--第一行-->
            <u-row customStyle="margin-bottom: 10px" class="textSize">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <text class="textSize">
                    订单编号:{{ item.repairNum }}
                  </text>
                </view>
              </u-col>
              <u-col span="5">
                <view :style="{ 'color': item.repairState === '0' ? 'blue' : 'red' }" class="demo-layout bg-purple">
                  <text class="textSize">
                    状态：{{ item.repairState === '0' ? '决定' : '未决定' }}
                  </text>
                </view>
              </u-col>
              <!-- 删除按钮 -->
              <u-col span="1">
                <view @click="deleteEvaluate(item.repairNum)"
                      v-if="item.repairLike > 0"
                      style="margin-left: 10rpx; margin-top: 8rpx">
                  <u-icon name="trash-fill" size="20" color="#C94F4F"/>
                </view>
              </u-col>
            </u-row>
            <!--左右布局-->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <u--image :showLoading="true" :src="src" width="60px" height="60px" shape="circle"></u--image>
                </view>
              </u-col>
              <u-col span="6">
                <view class="demo-layout bg-purple">

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          处理人姓名:{{ item.completeName }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          电话:{{ item.completePhone }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          地址:{{ item.address }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          结单时间:{{ item.completeTime }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                </view>
              </u-col>
            </u-row>

            <!-- 评价按钮+弹出框 -->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <!-- 未评论 -->
                <view class="demo-layout bg-purple-light"
                      v-if="item.repairState==0 && item.repairLike <= 0">
                  <u-button @click="showDetailPopup = true; this.evaluateRepairNum=item.repairNum"
                            text="评论"/>
                  <!-- 评论弹出层 -->
                  <u-popup :show="showDetailPopup" @close="this.showDetailPopup = false" @open="openDetailPopup"
                           mode="center">
                    <view class="evaluate-popup">
                      <text style="font-size: 40rpx;margin-top: 20rpx;margin-bottom: 50rpx">
                        满意的话请打五星，谢谢您的支持
                      </text>
                      <u-rate v-model="likeValue" count="5"
                              size="30" active-color="#f9d3e3"/>
                      <view style="display: flex;width: 100%;margin-top: 50rpx">
                        <u-button @click="this.showDetailPopup = false"
                                  text="关闭"/>
                        <u-button @click="submitterEvaluate(item.repairNum)" type="primary"
                                  text="提交评价"/>
                      </view>
                    </view>
                  </u-popup>
                </view>
                <!-- 已评论 -->
                <view class="demo-layout bg-purple-light" v-if=" item.repairLike > 0">
                  <u-rate count="5" :value="item.repairLike" size="23" active-color="#f9d3e3" readonly/>
                </view>
              </u-col>
              <!-- 订单详情按钮 -->
              <u-col span="6">
                <view class="demo-layout bg-purple">
                  <u-button @click="orderDetailPopup  = true">详情</u-button>
                  <u-popup :show="orderDetailPopup " @close="closeOrderDetailPopup" @open="openOrderDetailPopup"
                           mode="center">
                    <view style="width: 280px; height: 480px; padding: 20px;">
                      <view>报修内容:{{ item.repairContent }}</view>
                      <view>小区id:{{ item.communityId }}</view>
                      <view v-if="item.img !== '' && item.img !== null">
                        <img v-for="i in item.img.split(',')" :src="i"
                             style="width: 40rpx; height: 40rpx"/>
                      </view>
                      <u-button @click="closeOrderDetailPopup">关闭弹窗</u-button>
                    </view>
                  </u-popup>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>

        <!--决定-->
        <view v-if="current === 1">
          <view v-for="(item, index) in itemArr" v-if="item.repairState==='0'"
                :key="index"
                class="card">
            <!--第一行-->
            <u-row customStyle="margin-bottom: 10px" class="textSize">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <text class="textSize">
                    订单编号:{{ item.repairNum }}
                  </text>
                </view>
              </u-col>
              <u-col span="6">
                <view :style="{ 'color': item.repairState === '0' ? 'blue' : 'red' }" class="demo-layout bg-purple">
                  <text class="textSize">
                    状态：{{ item.repairState === '0' ? '决定' : '未决定' }}
                  </text>
                </view>
              </u-col>
            </u-row>
            <!--左右布局-->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <u-image :showLoading="true" :src="src" width="60px" height="60px" shape="circle"/>
                </view>
              </u-col>
              <u-col span="6">
                <view class="demo-layout bg-purple">

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          处理人姓名:{{ item.completeName }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          电话:{{ item.completePhone }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          地址:{{ item.address }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          结单时间:{{ item.completeTime }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                </view>
              </u-col>
            </u-row>

            <!-- 评价按钮+弹出框 -->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <!-- 未评论 -->
                <view class="demo-layout bg-purple-light"
                      v-if="item.repairState == '0' && item.repairLike <= 0">
                  <u-button @click="showDetailPopup = true; this.evaluateRepairNum=item.repairNum"
                            text="评论"/>
                  <!-- 评论弹出层 -->
                  <u-popup :show="showDetailPopup" @close="this.showDetailPopup = false" @open="openDetailPopup"
                           mode="center">
                    <view class="evaluate-popup">
                      <text style="font-size: 40rpx;margin-top: 20rpx;margin-bottom: 50rpx">
                        满意的话请打五星，谢谢您的支持
                      </text>
                      <!--                      <text style="font-size: 40rpx">请对本次服务做出评价吧！</text>-->
                      <u-rate v-model="likeValue" count="5"
                              size="30" active-color="#f9d3e3"/>
                      <view style="display: flex;width: 100%;margin-top: 50rpx">
                        <u-button @click="this.showDetailPopup = false"
                                  text="关闭"/>
                        <u-button @click="submitterEvaluate" type="primary"
                                  text="提交评价"/>
                      </view>
                    </view>
                  </u-popup>
                </view>
                <!-- 已评论 -->
                <view class="demo-layout bg-purple-light" v-if="item.repairState === '0' && item.repairLike > 0">
                  <u-rate count="5" :value="item.repairLike" size="23" active-color="#f9d3e3" readonly/>
                </view>
              </u-col>
              <!-- 订单详情按钮 -->
              <u-col span="6">
                <view class="demo-layout bg-purple">
                  <u-button @click="orderDetailPopup  = true">详情</u-button>
                  <u-popup :show="orderDetailPopup " @close="closeOrderDetailPopup" @open="openOrderDetailPopup"
                           mode="center">
                    <view style="width: 280px; height: 480px; padding: 20px;">
                      <view>报修内容:{{ item.repairContent }}</view>
                      <view>小区id:{{ item.communityId }}</view>

                      <view v-if="item.img !== '' && item.img !== null">
                        <img v-for="i in item.img.split(',')" :src="i"
                             style="width: 40rpx; height: 40rpx"/>
                      </view>
                      <u-button @click="closeOrderDetailPopup">关闭弹窗</u-button>
                    </view>
                  </u-popup>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>


        <!-- 未决定 -->
        <view v-if="current === 2">
          <view v-for="(item, index) in itemArr" v-if="item.repairState==='1'"
                :key="index"
                class="card">
            <!--第一行-->
            <u-row customStyle="margin-bottom: 10px" class="textSize">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <text class="textSize">
                    订单编号:{{ item.repairNum }}
                  </text>
                </view>
              </u-col>
              <u-col span="5">
                <view :style="{ 'color': item.repairState === '0' ? 'blue' : 'red' }" class="demo-layout bg-purple">
                  <text class="textSize">
                    状态：{{ item.repairState === '0' ? '决定' : '未决定' }}
                  </text>
                </view>
              </u-col>
            </u-row>
            <!--左右布局-->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <view class="demo-layout bg-purple-light">
                  <u-image :showLoading="true" :src="src" width="60px" height="60px" shape="circle"/>
                </view>
              </u-col>
              <u-col span="6">
                <view class="demo-layout bg-purple">

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          处理人姓名:{{ item.completeName }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          电话:{{ item.completePhone }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          地址:{{ item.address }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                  <u-row customStyle="margin-bottom: 10px">
                    <u-col span="12">
                      <view class="demo-layout bg-purple-light">
                        <text class="textSize">
                          结单时间:{{ item.completeTime }}
                        </text>
                      </view>
                    </u-col>
                  </u-row>

                </view>
              </u-col>
            </u-row>

            <!-- 评价按钮+弹出框 -->
            <u-row customStyle="margin-bottom: 10px">
              <u-col span="6">
                <!-- 未评论 -->
                <view class="demo-layout bg-purple-light"
                      v-if="item.repairState === '0' && item.repairLike <= 0">
                  <u-button @click="showDetailPopup = true; this.evaluateRepairNum=item.repairNum"
                            text="评论"/>
                  <!-- 评论弹出层 -->
                  <u-popup :show="showDetailPopup" @close="this.showDetailPopup = false" @open="openDetailPopup"
                           mode="center">
                    <view class="evaluate-popup">
                      <text style="font-size: 40rpx;margin-top: 20rpx;margin-bottom: 50rpx">
                        满意的话请打五星，谢谢您的支持
                      </text>
                      <u-rate v-model="likeValue" count="5"
                              size="30" active-color="#f9d3e3"/>
                      <view style="display: flex;width: 100%;margin-top: 50rpx">
                        <u-button @click="this.showDetailPopup = false"
                                  text="关闭"/>
                        <u-button @click="submitterEvaluate" type="primary"
                                  text="提交评价"/>
                      </view>
                    </view>
                  </u-popup>
                </view>
                <!-- 已评论 -->
                <view class="demo-layout bg-purple-light" v-if="item.repairState === '1' && item.repairLike > 0">
                  <u-rate count="5" :value="item.repairLike" size="23" active-color="#f9d3e3" readonly/>
                </view>
              </u-col>
              <!-- 订单详情按钮 -->
              <u-col span="6">
                <view class="demo-layout bg-purple">
                  <u-button @click="orderDetailPopup  = true">详情</u-button>
                  <u-popup :show="orderDetailPopup " @close="closeOrderDetailPopup" @open="openOrderDetailPopup"
                           mode="center">
                    <view style="width: 280px; height: 480px; padding: 20px;">
                      <view>报修内容:{{ item.repairContent }}</view>
                      <view>小区id:{{ item.communityId }}</view>
                      <view v-if="item.img !== '' && item.img !== null">
                        <img v-for="i in item.img.split(',')" :src="i"
                             style="width: 40rpx; height: 40rpx"/>
                      </view>
                      <u-button @click="closeOrderDetailPopup">关闭弹窗</u-button>
                    </view>
                  </u-popup>
                </view>
              </u-col>
            </u-row>
          </view>
        </view>
      </view>

      <!-- 在手机左下角添加图标 -->
      <view class="icon-container" @click="openRepairPopup">
        <u-icon name="plus" size="20" color="#fff"></u-icon>
      </view>
      <u-popup :show="repairPopup" @close="closeRepairPopup" mode="bottom">
        <!-- 弹出框中用于输入报修内容的内容 -->
        <view style="width: 280px; height: 100%; padding: 20px;">
          <!--公共和私有-->
          <u-subsection :list="listTradeL" :current="curNow" @change="sectionChange"></u-subsection>
          <!-- 公共资源的内容  -->
          <view v-if="curNow ===0">
            <u-form
                labelPosition="left"
                :model="repair"
                :rules="rules"
                ref="uForm"
            >
              <u-form-item
                  label="报修内容"
                  prop="repairContent"
                  borderBottom
                  ref="item1">
                <u-input
                    v-model="repair.repairContent"
                    border="none"
                    placeholder="请输入"
                ></u-input>
              </u-form-item>

              <u-form-item
                  label="手机号码"
                  prop="telephone"
                  borderBottom
                  ref="item1">
                <u-input
                    v-model="repair.telephone"
                    border="none"
                    placeholder="请输入"
                ></u-input>
              </u-form-item>

              <!--图片上传-->
              <u-upload
                  :fileList="img"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="1"
                  multiple
                  :maxCount="10"
              ></u-upload>


              <!--级联-->
              <u-form-item label="小区名称:" prop="communityId" :required="true"
                           @click="showCommunityPicker = true">
                <u-picker :show="showCommunityPicker" :columns="communities"
                          @confirm="handleConfirm('community',$event)"
                          @cancel="handleCancel('community')"
                          keyName="label"/>
                <u-input v-model="communityText" placeholder="请选择" @focus="showBuildingPicker = true"
                         readonly></u-input>
              </u-form-item>

              <u-form-item label="楼栋名称:" prop="buildingId" :required="true" @click="showBuildingMessage">
                <u-picker :show="showBuildingPicker" :columns="buildings"
                          @confirm="handleConfirm('building',$event)"
                          @cancel="handleCancel('building')"
                          keyName="label"/>
                <u-input v-model="buildingText" placeholder="请选择" readonly></u-input>
              </u-form-item>


              <u-form-item label="单元名称:" prop="unitId" :required="true" @click="showUnitMessage">
                <u-picker :show="showUnitPicker" :columns="units"
                          @confirm="handleConfirm('unit',$event)"
                          @cancel="handleCancel('unit')"
                          keyName="label"/>
                <u-input v-model="unitText" placeholder="请选择" readonly></u-input>
              </u-form-item>

              <!--备注-->
              <u-form-item label="备注:">
                <u--textarea v-model="repair.remark" placeholder="请输入内容"></u--textarea>
              </u-form-item>
            </u-form>
          </view>
          <!-- 私有资源的内容  -->
          <view v-if="curNow ===1">
            <u-form
                labelPosition="left"
                :model="repair"
                :rules="rules"
                ref="uForm"
            >
              <u-form-item
                  label="报修内容"
                  prop="repairContent"
                  borderBottom
                  ref="item1">
                <u-input
                    v-model="repair.repairContent"
                    border="none"
                    placeholder="请输入"
                ></u-input>
              </u-form-item>

              <u-form-item
                  label="手机号码"
                  prop="telephone"
                  borderBottom
                  ref="item1">
                <u-input
                    v-model="repair.telephone"
                    border="none"
                    placeholder="请输入"
                ></u-input>
              </u-form-item>

              <!--图片上传-->
              <u-upload
                  :fileList="img"
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="1"
                  multiple
                  :maxCount="10"
              ></u-upload>

              <!--级联-->
              <u-form-item label="小区名称:" prop="communityId" :required="true"
                           @click="showCommunityPicker = true">
                <u-picker :show="showCommunityPicker" :columns="communities"
                          @confirm="handleConfirm('community',$event)"
                          @cancel="handleCancel('community')"
                          keyName="label"/>
                <u-input v-model="communityText" placeholder="请选择" @focus="showBuildingPicker = true"
                         readonly></u-input>
              </u-form-item>

              <u-form-item label="楼栋名称:" prop="buildingId" :required="true" @click="showBuildingMessage">
                <u-picker :show="showBuildingPicker" :columns="buildings"
                          @confirm="handleConfirm('building',$event)"
                          @cancel="handleCancel('building')"
                          keyName="label"/>
                <u-input v-model="buildingText" placeholder="请选择" readonly></u-input>
              </u-form-item>


              <u-form-item label="单元名称:" prop="unitId" :required="true" @click="showUnitMessage">
                <u-picker :show="showUnitPicker" :columns="units"
                          @confirm="handleConfirm('unit',$event)"
                          @cancel="handleCancel('unit')"
                          keyName="label"/>
                <u-input v-model="unitText" placeholder="请选择" readonly></u-input>
              </u-form-item>

              <u-form-item label="房间名称:" prop="roomId" :required="true" @click="showRoomMessage">
                <u-picker :show="showRoomPicker" :columns="rooms"
                          @confirm="handleConfirm('room',$event)"
                          @cancel="handleCancel('room')"
                          keyName="label"/>
                <u-input v-model="roomText" placeholder="请选择"></u-input>
              </u-form-item>

              <view class="form-group">
                <text class="label">期待上门时间:</text>
                <picker mode="date" @change="handleDateChange" class="date-picker">
                  <view class="date-picker-content">
                    <text v-if="!repair.doorTime" class="placeholder">请选择到访日期</text>
                    {{ repair.doorTime }}
                  </view>
                </picker>
              </view>

              <!--备注-->
              <u-form-item label="备注:">
                <u--textarea v-model="repair.remark" placeholder="请输入内容"></u--textarea>
              </u-form-item>
            </u-form>
          </view>

          <view style="margin:auto ;text-align: center;padding:0 10%;">
            <u-button @click="handleSubmit" type="primary" :ripple="true" ripple-bg-color="#909399"
                      style="text-align: center;">提交
            </u-button>
          </view>
        </view>
      </u-popup>
    </view>

  </view>

</template>

<script>
export default {
  data() {
    return {
      statusColor: 'orange', // 默认颜色，可以根据状态修改
      // 头部
      list: [{
        name: '全部保修'
      },
        {
          name: '决定'
        },
        {
          name: '未决定'
        }
      ],
      listTradeL: [{name: '公共资源'}, {name: '私有资源'}],
      // 默认显示
      curNow: 0,
      // 头像
      src: 'https://cdn.uviewui.com/uview/album/1.jpg',
      // 弹出框状态
      showDetailPopup: false,
      orderDetailPopup: false,
      repairPopup: false,
      repairContent: "",
      // 点赞状态
      likeCalculation: 4,
      likeValue: 1,
      itemArr: [],
      repair: {
        "repairState": '1',
        "doorTime": "",
        "repairContent": "",
        "address": "",
        "img": "",
        "telephone": "",
        "repairLike": "",
        "communityId": '',
        "remark": "",
      },
      buildingId: '',
      unitId: '',
      rules: {
        communityId: [{
          required: true,
          message: '请输入小区名称',
          trigger: ['blur', 'change']
        }],
        repairContent: [{
          required: true,
          message: '请输入报修内容',
          trigger: ['blur', 'change']
        }],
        telephone: [{
          type: 'number',
          required: true,
          message: '请输入报修内容',
          trigger: ['blur', 'change']
        }]
      },
      current: 0,
      //  图片数组
      img: [],
      // --------------
      communityText: '',
      buildingText: '',
      unitText: '',
      roomText: '',
      showCommunityPicker: false,
      showBuildingPicker: false,
      showUnitPicker: false,
      showRoomPicker: false,
      communities: [], //社区集合
      buildings: [], //楼栋集合
      units: [], //单元集合
      rooms: [], //房间集合
    };
  },
  methods: {
    // 日期
    handleDateChange(event) {
      // 处理日期选择器变化
      this.repair.doorTime = event.mp.detail.value;
    },
    //评价提交
    submitterEvaluate(repairNum) {
      this.$http.put('/uni-app/repair/update', {
        repairLike: this.likeValue,
        repairNum: repairNum
      }).then(res => {
        console.log(res.data)
        uni.navigateTo({url: '/pages/repair/repair'})
      });
    },

    change(index) {
      this.current = index.index;
      if (this.current === '维修全部订单') {
        this.ZyRepairAll();
        this.statusColor = 'orange'; // 修改颜色
      }
      if (this.current === '决定') {
        this.ZyRepairDecision();
        this.statusColor = 'blue'; // 修改颜色
      }
      if (this.current === '未决定') {
        this.ZyRepairPending();
        this.statusColor = 'red'; // 修改颜色
      }
    },
    openDetailPopup() {
    },
    closeOrderDetailPopup() {
      this.orderDetailPopup = false;
    },
    openOrderDetailPopup() {
    },
    // 报修内容
    // 图标
    openRepairPopup() {
      this.clearForm();
      this.$refs.uForm.clearValidate();
      this.repairPopup = true;
    },
    closeRepairPopup() {
      this.repairPopup = false;
    },
    // 报修查询到的全部数据
    ZyRepairAll() {
      this.$http.get('/uni-app/ZyRepairAll', {
        headers: {
          'token': uni.getStorageSync("token")
        }
      }).then(res => {
        if (res.data.data) {
          this.itemArr = res.data.data;
          console.log("itemAll", this.itemArr)
        }
      })
    },
    // 手动触发表单验证
    async handleSubmit() {
      const isValid = await this.$refs.uForm.validate();
      if (isValid) {
        this.submitRepair();
      } else {
        console.log('注册失败');
      }
    },

    //删除报事报修
    deleteEvaluate(num){
      this.$http.delete('/uni-app/repair/'+num).then(res => {
        if (res.data.code){
          uni.navigateTo({url:'/pages/repair/repair'})
        }
      });
    },

    // 按钮提交
    submitRepair() {
      this.repair.address = this.communityText + this.buildingText + this.unitText + this.roomText;
      this.repair.img = this.img.map(file => file.url).join(',');

      this.$http.post('/uni-app/addZyRepair', this.repair).then(res => {
        if (res.data.data) {
          wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000,
          });
        }
      })
      console.log(this.repair)
      // 提交后关闭弹出框
      this.closeRepairPopup();
      uni.navigateTo({url: '/pages/repair/repair'})
    },
    sectionChange(index) {
      this.curNow = index;
      this.clearForm();
      this.$refs.uForm.clearValidate();
      this.$forceUpdate();
    },
    // 图片上传
    // 删除图片
    deletePic(event) {
      this.img.splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      this.img = [];
      let lists = [].concat(event.file)
      let fileListLen = this.img.length
      lists.map((item) => {
        this.img.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        console.log("上传返回：", result)
        let item = this.img[fileListLen]
        this.img.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }));
        fileListLen++;
      }
      console.log("图片容器：", this.img);
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://localhost:8080/uni-app/sugUploadImages',
          filePath: url,
          name: 'file',
          success: (res) => {
            if (res.statusCode) {
              const result = JSON.parse(res.data);
              resolve(result.data);
            } else {
              reject(new Error("OSS上传失败"));
            }
          }
        });
      })
    },
    //小区、楼栋、单元号
    handleConfirm(type, value) {
      if (type === 'community') {
        console.log("comvalue=", value)
        this.communityText = value.value[0].label;
        this.repair.communityId = value.value[0].value;
        console.log(this.repair.communityId)
        this.buildingText = '';
        this.unitText = '';
        this.roomText = '';
        this.loadBuildings();

        this.showCommunityPicker = false;
      } else if (type === 'building') {
        console.log("*********buildingValue=", value)
        this.buildingText = value.value[0].label;
        this.buildingId = value.value[0].value;
        this.unitText = '';
        this.roomText = '';
        this.loadUnits();
        this.showBuildingPicker = false;
      } else if (type === 'unit') {
        this.unitText = value.value[0].label;
        this.unitId = value.value[0].value;
        console.log(this.unitId)
        this.roomText = '';
        this.loadRooms();
        this.showUnitPicker = false;
      } else if (type === 'room') {
        this.roomText = value.value[0].label;
        this.roomId = value.value[0].value;
        console.log(this.roomId)
        this.showRoomPicker = false;
      }
    },
    handleCancel(type) {
      if (type === 'community') {
        this.showCommunityPicker = false;
        // 处理小区名称选择器确认操作
      } else if (type === 'building') {
        this.showBuildingPicker = false;
      } else if (type === 'unit') {
        this.showUnitPicker = false;
      } else if (type === 'room') {
        this.showRoomPicker = false;
      }
    },
    loadCommunities() {
      this.communities = [];
      this.$http.get('/uni-app/ZyCommunity').then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].communityName;
          key.value = list[i].communityId;
          this.$set(arr, i, key);
        }
        this.communities.push(arr);
        console.log("communities=", this.communities);
      })
    },
    loadBuildings() {
      const communityId = this.repair.communityId
      console.log("communityId=", communityId)
      this.$http.get('/uni-app/ZyBuilding/' + communityId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].buildingName;
          key.value = list[i].buildingId;
          this.$set(arr, i, key);
        }
        this.buildings = [];
        this.buildings.push(arr);
        console.log("buildings=", this.buildings);
      })
    },
    loadUnits() {
      const buildingId = this.buildingId
      console.log("buildingId=", buildingId)
      this.$http.get('/uni-app/ZyUnit/' + buildingId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].unitName;
          key.value = list[i].unitId;
          this.$set(arr, i, key);
        }
        this.units = [];
        this.units.push(arr);
        console.log("units=", this.units);
      })
    },
    loadRooms() {
      const unitId = this.unitId
      console.log("unitId=", unitId)
      this.$http.get('/uni-app/ZyRoom/' + unitId).then(result => {
        let list = result.data.data
        let arr = [];
        for (let i = 0; i < list.length; i++) {
          let key = {value: "", label: ""};
          key.label = list[i].roomName;
          key.value = list[i].roomId;
          this.$set(arr, i, key);
        }
        this.rooms = [];
        this.rooms.push(arr);
        console.log("rooms=", this.rooms);
      })
    },
    showBuildingMessage() {
      let communityId = this.repair.communityId
      if (communityId == null || communityId === "") {
        uni.showToast({
          title: '请先选择小区名称',
          icon: 'none'
        });
      } else {
        this.showBuildingPicker = true
      }
    },
    showUnitMessage() {
      let buildingId = this.buildingId
      if (buildingId == null || buildingId === "") {
        uni.showToast({
          title: '请先选择楼栋名称',
          icon: 'none'
        });
      } else {
        this.showUnitPicker = true
      }
    },
    showRoomMessage() {
      let unitId = this.unitId
      if (unitId == null || unitId === "") {
        uni.showToast({
          title: '请先选择单元名称',
          icon: 'none'
        });
      } else {
        this.showRoomPicker = true
      }
    },
    clearForm() {
      this.repair = {
        "repairState": '1',
        "doorTime": "",
        "repairContent": "",
        "address": "",
        "img": "",
        "telephone": "",
        "repairLike": "",
        "communityId": '',
        "remark": "",
      };
      this.img = [];
      this.communityText = '';
      this.buildingText = '';
      this.unitText = '';
      this.roomText = '';
    }

  },
  mounted() {
    this.ZyRepairAll();
    this.loadCommunities();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
}
</script>
